let config = document.querySelector('.config-an')
let login = document.querySelector('.login-text')
let check = document.querySelector('.check-text')
let error = document.querySelector('.error-text')
let mobile = document.querySelector('input[name="mobile"]')
let code = document.querySelector('input[name="code"]')
let checkbox = document.querySelector('input[name="checkbox"]')
let forget = document.querySelector('.forget')
let motai = document.querySelector('.motai')
let motai_x = document.querySelector('.motai-x')
let rightLeft = document.querySelector('.right-left')
let rightRigth = document.querySelector('.right-rigth')
let conan = document.querySelector('.container')
let configContainer = document.querySelector('.config')  // 获取 config 容器

// 登录
let isConfig = false  // 跟踪当前状态
config.addEventListener('click', () => {
    let mobileValue = mobile.value
    let codeValue = code.value
    if (mobileValue === '13888888888' && codeValue === '246810') {
        // 验证成功
        if (isConfig) {
            // 当前是 .config-yuan，切换回 .config-an 并显示登录文字
            config.classList.remove('config-yuan')
            config.classList.add('config-an')
            login.style.display = 'inline' // 显示登录文字
            check.style.display = 'none'  // 隐藏√
            error.style.display = 'none'  // 隐藏×
        } else {
            // 当前是 .config-an，切换到 .config-yuan 并显示√符号
            config.classList.remove('config-an')
            config.classList.add('config-yuan')
            login.style.display = 'none'  // 隐藏登录文字
            check.style.display = 'inline'  // 显示√
            error.style.display = 'none'  // 隐藏×
        }
        isConfig = !isConfig  // 切换状态

        // 添加密钥并跳转到指定页面
        localStorage.setItem('token', 'chixianqiu')
        setTimeout(() => {
            window.open('../background/index.html', '_blank');
        }, 1500)
    } else {
        // 验证失败
        if (isConfig) {
            // 当前是 .config-yuan，切换回 .config-an 并显示登录文字
            config.classList.remove('config-yuan')
            config.classList.add('config-an')
            login.style.display = 'inline'  // 显示登录文字
            check.style.display = 'none'  // 隐藏√
            error.style.display = 'none'  // 隐藏×
        } else {
            // 当前是 .config-an，切换到 .config-yuan 并显示×符号
            config.classList.remove('config-an')
            config.classList.add('config-yuan')
            login.style.display = 'none'  // 隐藏登录文字
            check.style.display = 'none'  // 隐藏√
            error.style.display = 'inline'  // 显示×
        }
        isConfig = !isConfig  // 切换状态

        // 要是登录失败 一秒后重新显示登录选项
        setTimeout(() => {
            config.classList.remove('config-yuan')
            config.classList.add('config-an')
            login.style.display = 'inline'  // 显示登录文字
            check.style.display = 'none'  // 隐藏√
            error.style.display = 'none'  // 隐藏×
            isConfig = false  // 切换状态
        }, 1000)
    }
})

// 检查 localStorage 中是否有保存的值
let savedMobile = localStorage.getItem('mobile')  // 从本地存储中获取之前保存的手机号，赋值给savedMobile
let savedCode = localStorage.getItem('code')  // 从本地存储中获取之前保存的验证码，赋值给savedCode
let isRemember = localStorage.getItem('isRemember')  // 从本地存储中获取是否记住输入状态的标志，赋值给isRemember

// 判断是否记住输入
if (isRemember === 'true') {  // 检查isRemember的值是否为字符串'true'，如果是，则执行以下代码块
    mobile.value = savedMobile || ''  // 如果savedMobile有值，则将其填入手机号输入框中；如果没有值，则用空字符串填充
    code.value = savedCode || ''  // 如果savedCode有值，则将其填入验证码输入框中；如果没有值，则用空字符串填充
    checkbox.checked = true  // 将复选框设为选中状态，表示用户希望记住输入的信息
}

checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
        // 如果复选框被选中，则保存当前输入框的值到本地存储
        localStorage.setItem('mobile', mobile.value)
        localStorage.setItem('code', code.value)
        localStorage.setItem('isRemember', 'true')  // 将记住状态标记为true
    } else {
        // 如果复选框未被选中，则清除保存的值
        localStorage.removeItem('mobile')
        localStorage.removeItem('code')
        localStorage.setItem('isRemember', 'false')
    }
})

// 点击忘记密码
forget.addEventListener('click', (event) => {
    event.preventDefault()  // 阻止默认行为，即默认的跳转行为
    motai.style.display = 'block'  // 显示
})

motai_x.addEventListener('click', () => {
    motai.style.display = 'none'  // 隐藏
})

// 初始化页面时显示 conan 并将 right-left 的背景色变灰
document.addEventListener('DOMContentLoaded', () => {
    // 显示 conan
    conan.style.opacity = 1;
    conan.style.transform = 'translateX(0)';

    // 将 right-left 的背景色变灰
    rightLeft.style.backgroundColor = '#BDBDBD';

    // 点击 right-rigth 后隐藏 conan，显示 config，并且 right-left 的背景色恢复，right-rigth 的背景色变灰
    rightRigth.addEventListener('click', () => {
        // 隐藏 conan
        conan.classList.add('hide');

        // 显示 config
        configContainer.style.display = 'block';  // 确保 config 容器显示
        configContainer.classList.add('show');
        configContainer.style.opacity = 1;
        configContainer.style.transform = 'translateX(0)';

        // 恢复 right-left 的背景色
        rightLeft.style.backgroundColor = '';

        // 将 right-rigth 的背景色变灰
        rightRigth.style.backgroundColor = '#BDBDBD';
    });

    // 点击 right-left 后隐藏 config，显示 conan，并且 right-rigth 的背景色恢复，right-left 的背景色变灰
    rightLeft.addEventListener('click', () => {
        // 隐藏 config
        configContainer.style.display = 'none';  // 确保 config 容器隐藏
        configContainer.classList.remove('show');
        configContainer.style.opacity = 0;
        configContainer.style.transform = 'translateX(-100%)';

        // 显示 conan
        conan.classList.remove('hide');
        conan.style.opacity = 1;
        conan.style.transform = 'translateX(0)';

        // 恢复 right-rigth 的背景色
        rightRigth.style.backgroundColor = '';

        // 将 right-left 的背景色变灰
        rightLeft.style.backgroundColor = '#BDBDBD';
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.container');

    // 获取文章数据
    fetch('http://127.0.0.1:8080/articles')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 动态生成 HTML 内容
                const articles = data.data;
                articles.forEach(article => {
                    const carda = document.createElement('div');
                    carda.className = 'carda';
                    carda.innerHTML = `
                        <img src="${article.category}" alt="${article.title}">
                        <h3>${article.title}</h3>
                        <em>${article.author}</em> <em>/</em> <em>${article.status}</em>
                        <p>${article.content.substring(0, 100)}...</p>
                    `;
                    container.appendChild(carda);
                });
            } else {
                console.error('获取文章数据失败:', data.message);
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
});

window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.toggle').addEventListener('click',() => {
        if (document.body.classList.contains('dark-mode')) {
            document.body.classList.remove('dark-mode');
        } else {
            document.body.classList.add('dark-mode')
        }
    })
})
